<template>
  <div id="login">
    <el-card>
      <div slot="header">登录</div>
      <div>
        <el-form
          label-position="top"
          label-width="80px"
          :model="user"
          ref="ruleForm"
          :rules="rules"
          status-icon
        >
          <el-form-item label="e-mail" prop="email">
            <el-input v-model="user.email"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="user.password" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleLogin">登录</el-button>
          </el-form-item>
          <router-link to="/user/register">还没有账号?</router-link>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入密码"));
      }
    };
    var validateEmail = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入邮箱"));
      } else {
        var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;

        if (!reg.test(value)) {
          callback(new Error("邮箱格式错误"));
        } else {
          callback();
        }
      }
    };
    return {
      user: {
        email: "",
        password: "",
      },
      rules: {
        password: [{ validator: validatePass, trigger: "blur" }],
        email: [
          {
            validator: validateEmail,
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleLogin() {
      this.$store.dispatch("Login", this.user).then(() => {
       
        this.$router.push({
          path: "/home",
        });
      });
    },
  },
};
</script>
<style>
 #background .el-button{ 
    background-size: 400%;
    width: 100%;
    border: none;
    background:#fff;
    color: #0ab392;
  }
  #background .el-button:hover{ 
    background: #0ab392;
    color: #fff;
  }
</style>